<template>
    <div>
        <el-container>
            <el-header class="header">
                <router-link to="/" class="logo">LOGO</router-link>
            </el-header>
        </el-container>
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="1" class="el-menu-vertical-demo">
                    <el-menu-item index="1" v-if="permission === 0">
                        <router-link to="/MangerHome" tag="span">组织管理</router-link>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <router-link to="/MangerRangerList" tag="span">靶场</router-link>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import PublicLogin from "@/common/PublicLogin.vue";
import Cookies from "js-cookie";
export default {
    name: "HomePage",
    data() {
        return {
            permission: -1
        }
    },
    methods: {
        initPermission() {
            let token = Cookies.get('user');
            let params={
                token:token
            }
            console.log(token)
            this.$axios.postForm("userinfo/getPermission",params).then(res => {
                console.log(res);
                if (res.data.data === 0) {
                    this.permission = res.data.data;
                    console.log(this.permission)
                }
            })
        }
    },
    computed: {
        isUserLoggedIn() {
            return !!Cookies.get('token');
        },
        userAvatar() {
            // 替换为实际的用户头像 URL
            return 'https://example.com/avatar.jpg';
        },
    },
    created() {
        this.initPermission();
    }
}
</script>

<style scoped>
.logo {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 20px 0;
}

.header {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #333;
    font-size: 22px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin-left: 45px;
}

.el-aside {
    background-color: #f8f8f8;
    .el-menu {
        border-right: 0;
        background-color: #f8f8f8;
    }
}

.el-main {
    background-color: #eaedf1;
}

.el-menu-vertical-demo {
    border-right: none;
    background-color: #f8f8f8 !important;
}

.el-menu-item {
    color: #333 !important;
    background-color: #f8f8f8 !important;
}

.el-menu-item.is-active {
    background-color: #e6f1ff !important;
}

.el-menu-item span {
    display: block;
    text-align: center;
}
</style>
